<template>
	<view class="downWarp">
		<button class="download" @click.stop="handleDownload(goods)">
			<slot name="cont"></slot>
		</button>
		<!-- 下载完成 -->
		<view class="wx_card" @click="showDownloadOK = false" v-if="showDownloadOK">
			<view class="wx_code" @click.stop>
				<text @click="showDownloadOK = false" class="iconfont iconguanbi1"></text>
				<view class="title">{{$t('cloudW.thePictureHasBeenDownloaded')}}</view> <!--图片已下载完成-->
				<view class="h1">1.{{$t('cloudW.productInformationHasBeenCopied')}}</view> <!--商品信息已复制-->
				<view class="h1 h2">2.{{$t('cloudW.thePictureHasBeenSavedToTheAlbum')}}</view> <!--图片已保存至相册-->
				<!-- #ifdef MP -->
				<!-- <button class="item" open-type="share" hover-class='none' @click="showDownloadOK = false">
					<text class="iconfont iconfenxiang"></text>
					<text class="text1">分享</text>
				</button> -->
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		goodsDetailApi
	} from '@/api/storeGoods.js';
	import {
		imageBase64
	} from '@/api/public.js';
	export default {
		props: {
			goods: {
				type: Object,
				default: function() {
					return {};
				}
			},
			configApi: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		data() {
			return {
				ewmImg: [],
				showDownloadOK: false,
				appletType: uni.getStorageSync("appletType")
			};
		},
		mounted() {

		},
		methods: {

			//微信小程序保存到相册
			handleDownload(item) {
				var that = this;
				goodsDetailApi(item.id).then(res => {
					console.log(res, "获取详情")
					var resData = res.data.productNorm
					var item = {}
					if (res.data.products) {
						res.data.products.map(i => {
							console.info(i.storeInfo.id === resData.id)
							if (i.id === resData.id) {
								item = i
							}
						})
					}
					
					item.attr = item.attr.map((i) => {
						return {
							attrName: i.attrName,
							attrValue: i.attrValues.split(","),
						};
					});
					item.attrValue.map((k, index) => {
						let valueArr = k.suk.split(",");
						item.attr.map((j, jndex) => {
							k["value" + jndex] = valueArr[jndex];
						});
					});
					var copeTextAll = `${that.$t('cloudW.brand')}：` + resData.brandName+"\n" + `${that.$t('cloudW.productName')}：` + resData.storeName
					for (var i = 0; i < item.attr.length; i++) {
						copeTextAll = copeTextAll +"\n" + item.attr[i].attrName + "："
						for (var y = 0; y < item.attr[i].attrValue.length; y++) {
							copeTextAll = copeTextAll + item.attr[i].attrValue[y] + '，'
						}
					}
					// #ifdef H5
					that.$copyText(copeTextAll)
					// #endif
					// #ifndef H5
					uni.setClipboardData({
						data: copeTextAll,
						success: function() {
							uni.showLoading({
								title: that.$t('cloudW.downloading')
							})
						}
					});
					// #endif
					that.$set(that, "ewmImg", JSON.parse(resData.sliderImage));
					if (that.configApi && that.configApi.img) {
						that.$set(that.configApi, "img", that.ewmImg[0]);
						that.$emit('update:configApi', that.configApi);
					}
					that.downloadImg(0)
				})
			},
			downloadImg(index) {
				var that = this;
				/* 判断是否授权 */
				uni.authorize({
					/* 这个就是保存相册的 */
					scope: 'scope.writePhotosAlbum',
					success() {
						/* 获取图片信息 */
						if (that.ewmImg[index].substring(0, 5) == "https") {
							uni.getImageInfo({
								src: that.ewmImg[index],
								success: function(image) {
									console.log(image);
									/* 保存图片到相册 */
									uni.saveImageToPhotosAlbum({
										filePath: image.path,
										success: function() {
											console.log('save success');
											if (index == that.ewmImg.length - 1) {
												uni.hideLoading()
												that.showDownloadOK = true
											} else {
												that.downloadImg(index + 1)
											}
										},
										fail(err) {
											console.log(err, "下载失败原因")
											uni.showToast({
												title: that.$t('cloudW.downloadFailed'),
												icon: "none"
											})
										}
									});
								},
								fail(errs) {
									console.log(errs, "下载失败原因")
								}
							});
						} else {
							if (index == that.ewmImg.length - 1) {
								uni.hideLoading()
								that.showDownloadOK = true
							} else {
								that.downloadImg(index + 1)
							}
						}
					},
					complete(res) {
						console.log(res);
						/* 这里判断一下如果没有授权重新打开设置选项 */
						uni.getSetting({
							success(res) {
								if (!res.authSetting['scope.writePhotosAlbum']) {
									uni.hideLoading()
									/* 打开设置的方法 */
									that.opensit();
								}
							}
						});
					}
				});

			},
			/* 授权提示 ，这里就是重复提示用户去授权*/
			opensit() {
				var that = this
				uni.showModal({
					content: that.$t('cloudW.authorizeTips'),
					cancelText:this.$t('publicLang.cancel'),
					confirmText: this.$t('publicLang.sure'),
					success: function(res) {
						if (res.confirm) {
							/* 这个就是打开设置的API*/
							uni.openSetting({
								success(res) {
									uni.showLoading({
										title: that.$t('cloudW.downloading')
									})
									that.downloadImg(0)
								}
							});
						}
					}
				});
			},
		},
	}
</script>

<style scoped lang='scss'>
	.wx_card {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 9999;

		.wx_code {
			width: 568rpx;
			background: #FFFFFF;
			border-radius: 4rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.iconguanbi1 {
				font-size: 24rpx;
				padding: 24rpx;
				position: absolute;
				top: 0;
				right: 0;
			}

			.title {
				font-size: 32rpx;
				font-weight: 500;
				color: #222222;
				padding: 78rpx 0 44rpx;
				text-align: center;

			}

			.h1 {
				font-size: 26rpx;
				font-weight: 400;
				color: #222222;
				padding: 0rpx 30rpx 30rpx 23rpx;
			}

			.h2 {
				padding-bottom: 43rpx;
			}

			.item {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-top: 1px solid #E6E6E6;
				font-size: 28rpx;
				font-weight: 400;
				color: #222222;

				.iconfenxiang {
					font-size: 26rpx;
					margin-right: 13rpx;
				}
			}
		}
	}
</style>
